<template>
  <div class="app RolePrivilegesEdit">
    <el-form label-width="80px">
      <el-form-item label="层级菜单">
        <div class="title">WEB</div>
        <el-tree
          ref="webTree"
          :data="data"
          :default-expand-all="true"
          :check-on-click-node="true"
          :expand-on-click-node="false"
          :check-strictly="true"
          show-checkbox
          node-key="id"
          :default-checked-keys="webCheckedMenus"
          :props="defaultProps"
          @check-change="treeCheckChange"
        />
      </el-form-item>
    </el-form>
    <el-form label-width="80px">
      <el-form-item label="您已选择">
        <el-tag
          v-for="tag in webCheckedMenus"
          :key="tag"
        >
          {{ tag }}
        </el-tag>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import util from '@/enhanceBase'

export default {
  data() {
    return {
      input: 1,
      webCheckedMenus: [3],
      data: [{
        id: 1,
        label: '一级 1',
        children: [{
          id: 4,
          label: '二级 1-1',
          children: [{
            id: 9,
            label: '三级 1-1-1'
          }, {
            id: 10,
            label: '三级 1-1-2'
          }]
        }, {
          id: 11,
          label: '二级 1-11',
          children: [{
            id: 12,
            label: '三级 1-1-12'
          }, {
            id: 13,
            label: '三级 1-1-13',
            children: [{
              id: 14,
              label: '4级 1-1-14'
            }, {
              id: 15,
              label: '4级 1-1-15'
            }]
          }]
        }]
      }, {
        id: 2,
        label: '一级 2',
        children: [{
          id: 5,
          label: '二级 2-1'
        }, {
          id: 6,
          label: '二级 2-2'
        }]
      }, {
        id: 3,
        label: '一级 3',
        children: [{
          id: 7,
          label: '二级 3-1'
        }, {
          id: 8,
          label: '二级 3-2'
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  methods: {
    // reference : https://blog.csdn.net/u013344993/article/details/108779250
    treeCheckChange(checkNode, checkStatus, var3) {
      // 选中所有上级
      let thisNode = this.$refs.webTree.getNode(checkNode.id) // 获取当前节点
      const keys = this.$refs.webTree.getCheckedKeys() // 获取已勾选节点的key值
      if (thisNode.checked) { // 当前节点若被选中
        for (let i = thisNode.level; i > 1; i--) { // 判断是否有父级节点
          if (!thisNode.parent.checked) { // 父级节点未被选中，则将父节点替换成当前节点，往上继续查询，并将此节点key存入keys数组
            thisNode = thisNode.parent
            keys.push(thisNode.data.id)
          }
        }
      } else {
        if (thisNode.childNodes) {
          const ids = this.recursionGetChildren(thisNode.childNodes)
          ids.forEach(x => {
            util.removeValueFromArray(keys, x)
          })
        }
      }
      this.$refs.webTree.setCheckedKeys(keys) // 将所有keys数组的节点全选中
      this.webCheckedMenus = keys
    },
    recursionGetChildren(childNodes, ids) {
      if (!ids) {
        ids = []
      }
      for (let i = 0; i < childNodes.length; i++) {
        const j = childNodes[i]
        if (j.checked) {
          ids.push(j.data.id)
        }
        if (j.childNodes) {
          this.recursionGetChildren(j.childNodes, ids)
        }
      }
      return ids
    },
    treeCheckChange2(checkNode, checkStatus, var3) {
      console.log(checkNode)
      if (checkStatus) {
        // 选中所有上级
      } else {
        // 取消选中所有下级
      }
    },
    handleNodeClick(data) {
      console.log(data)
    }
  }
}
</script>
<style lang="scss" scoped>
.title {
  width: 100%;
  text-align: center;
  font-weight: bold;
  margin-bottom: 7px;
  position: relative;
}

.title::before {
  content: "";
  position: absolute;
  left: 3%;
  width: 40%;
  top: 50%;
  border-bottom: 1px solid #eaeaea;
}

.title::after {
  content: "";
  position: absolute;
  right: 3%;
  width: 40%;
  top: 50%;
  border-bottom: 1px solid #eaeaea;
}

.rowTree {
  display: flex;
  flex-wrap: wrap;
}

.el-tag + .el-tag {
 margin-left: 10px;
}

</style>
<style lang='scss'>
.RolePrivilegesEdit {
  .el-tree-node {
    width: min-content !important;
  }

  .el-tree-node.is-expanded > .el-tree-node__children {
    display: flex !important;
    flex-wrap: nowrap;
    justify-content: flex-start;
    position: relative;
    left: -18px;
    top: -7px;
    margin-top: 14px;
  }
}
</style>
